<template>
  <el-drawer v-model="drawerProps.isView" :destroy-on-close="true" size="60%" :title="`${drawerProps.title}`">
    <div>
      <SelectFilter :data="type_filter_data" :default-values="filterResult" @change="changeFilter" />
    </div>
    <div>
      <ProTable
        ref="proTable"
        title="用户列表"
        :columns="columns"
        :request-api="getTableList"
        :pagination="false"
        row-key="bank_id"
      >
        <!-- Expand -->
        <template #expand="scope">
          {{ scope.row }}
        </template>
      </ProTable>
    </div>
    <div>
      <SelectFilter :data="type_filter_data" :default-values="filterResult" @change="changeFilter" />
    </div>
  </el-drawer>
</template>

<script setup lang="ts" name="optQuestionCollectionDrawer">
import { ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { getBankListApi } from "@/api/modules/bank";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { ElMessage } from "element-plus";
import SelectFilter from "@/components/SelectFilter/index.vue";

const proTable = ref<ProTableInstance>();
const filterResult = ref({ type: "" });
const type_filter_data = [
  {
    title: "集合操作",
    key: "type",
    options: [
      {
        label: "求差集",
        value: "except",
        icon: "ShoppingCart"
      },
      {
        label: "求并集",
        value: "union",
        icon: "ShoppingCart"
      },
      {
        label: "求交集",
        value: "intersect",
        icon: "ShoppingCart"
      }
    ]
  }
];

// 表格配置项
const columns: ColumnProps<any>[] = [
  { type: "selection", fixed: "left" },
  { prop: "type_name", label: "类型" },
  { prop: "name", label: "题库名字", fixed: "left" },
  // { type: "selection", fixed: "left", width: 70 },
  { prop: "sum", label: "题目数量" }
];

const drawerProps = ref<any>({
  isView: false,
  title: "",
  row: {}
});

const getBankListParams = ref<any>({
  course_id: 0
});

// 接收父组件传过来的参数
const acceptParams = (params: any) => {
  drawerProps.value = params;
  getBankListParams.value = {
    course_id: params.course_id
  };
};

const getTableList = () => {
  let result = getBankListApi(getBankListParams.value);
  return result;
};

// 提交数据（新增/编辑）
const handleSubmit = async (selectedListIds: any) => {
  try {
    if (filterResult.value.type === "") {
      ElMessage.success({ message: `请选择集合计算的类型~` });
      return;
    }
    drawerProps.value.condition = {
      type: filterResult.value.type,
      bank_ids: selectedListIds
    };
    drawerProps.value.getTableList!();
    drawerProps.value.isView = false;
  } catch (error) {
    console.log(error);
  }
  return true;
};

const changeFilter = (val: typeof filterResult.value) => {
  if (proTable.value?.selectedListIds.length === 0) {
    ElMessage.success({ message: `请选择集合计算的类型~` });
    return;
  }
  drawerProps.value.condition = {
    type: val.type,
    bank_ids: proTable.value?.selectedListIds
  };
  drawerProps.value.getTableList!();
  drawerProps.value.isView = false;
};

defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
@import "addQuestionsBatchDrawer";
</style>
